import { debounce } from "@/utils";

export default {
    data() {
        return {
            $_sidebarElm: null,
            $_resizeHandler: null
        };
    },
    mounted() {
        this.initListener();
    },
    activated() {
        if (!this.$_resizeHandler) {
            // avoid duplication init
            this.initListener();
        }

        // when keep-alive chart activated, auto resize
        this.resize();
    },
    beforeDestroy() {
        this.destroyListener();
    },
    deactivated() {
        this.destroyListener();
    },
    methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
        $_sidebarResizeHandler(e) {
            if (e.propertyName === "width") {
                this.$_resizeHandler();
            }
        },
        initListener() {
            this.$_resizeHandler = debounce(() => {
                this.resize();
            }, 100);
            window.addEventListener("resize", this.$_resizeHandler);

            this.$_sidebarElm = document.getElementsByClassName("sidebar-container")[0];
            this.$_sidebarElm && this.$_sidebarElm.addEventListener("transitionend", this.$_sidebarResizeHandler);
        },
        destroyListener() {
            window.removeEventListener("resize", this.$_resizeHandler);
            this.$_resizeHandler = null;

            this.$_sidebarElm && this.$_sidebarElm.removeEventListener("transitionend", this.$_sidebarResizeHandler);
        },
        resize() {
            const { chart } = this;
            chart && chart.resize();
        }
    }
};
